import React, { Component } from "react";
import { Modal, Tooltip, Form, Table, Row, Col, Spin, Divider, DatePicker, message, Button } from 'antd';
import { invoiceOrderList, prefixFile } from "../../fetch/fetchApi";
import classNames from 'classnames';

class OrderList extends Component {
    constructor(props) {
        super(props);
        this.init();
        this.state = {
            data: [],
            pagination: {}
        }

    }

    init() {
        this.query = {
            page: '1',
            pagecount: '10'
        };
        this.tableColumns = [
            {
                title: '平台订单号',
                dataIndex: 'orderId',
                key: 'orderId',
                width:200
            }, {
                title: '充电时间',
                dataIndex: 'chargePeriod',
                key: 'chargePeriod',
				width:172,
                render: (text, record) => (
                    <Tooltip placement="topLeft" title={text} >
                        {text}
                    </Tooltip>)
            }, {
                title: '电桩编号',
                dataIndex: 'stubId',
                key: 'stubId',
				width:140
            }, {
                title: '电量 (度)',
                dataIndex: 'power',
                key: 'power',
				width:100
            }, {
                title: '时长 (分)',
                dataIndex: 'chargeDuration',
                key: 'chargeDuration',
				width:100
            }, {
                title: '电费 (元)',
                dataIndex: 'elecAmount',
                key: 'elecAmount',
				width:100
            }, {
                title: '服务费 (元)',
                dataIndex: 'servAmount',
                key: 'servAmount',
				width:120,
                render: (text, record) => (
                    <Tooltip placement="topLeft" title={text} >
                        {text}
                    </Tooltip>)
            }, {
                title: '订单金额 (元)',
                dataIndex: 'totalAmount',
                key: 'totalAmount',
				width:160
            }, {
                title: '实付金额',
                dataIndex: 'amount',
                key: 'amount',
				width:120
            }
        ];
    }

    invoiceOrderList = (params = {}) => {
        this.setState({
            orderListLoading: true
        })
        invoiceOrderList(this.query).then((res) => {
            console.log(res.data.data);
            const pagination = this.state.pagination;
            pagination.total = res.data.pageLimit.totalCount;
            pagination.current = parseInt(this.query.page);
            this.setState({
                orderListLoading: false,
                data: res.data.data,
                pagination,
            });
        });
    }

    componentDidMount() {
        this.query.invoiceAppkey = this.props.record.invoiceAppkey;
        this.query.outInvoiceId = this.props.record.outInvoiceId;
        this.query.invoiceId = this.props.record.invoiceId;
        this.invoiceOrderList();
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.record && nextProps.record && this.props.record.invoiceId !== nextProps.record.invoiceId) {
            this.query.page = 1;
            this.query.invoiceAppkey = nextProps.record.invoiceAppkey;
            this.query.outInvoiceId = nextProps.record.outInvoiceId;
            this.query.invoiceId = nextProps.record.invoiceId;
            this.invoiceOrderList();
        }
    }

    handleTableChange=(pagination, filters, sorter) => {
        console.log(pagination);
        this.query.page = pagination.current;
        this.invoiceOrderList();
    }

    handleExportBtnClick=() => {
        let excelUrl = prefixFile + '/export.do?serviceName=invoiceOrder&fileName=订单列表&searchJson=';
        let paramUrl = '{';
        Object.keys(this.query).map((key) => {
            paramUrl += `"${key}"` + ":" + `"${this.query[key]}"` + ","
        });
        if (paramUrl.length > 0) {
            paramUrl = paramUrl.substr(0, paramUrl.length - 1)
        }
        paramUrl += "}";
        console.log(paramUrl);
        window.location.href = excelUrl + paramUrl;
    }

    render() {
        return (
            <div className="sc-page-content">
                <div className="page-toolbar">
                    <Row  className='export-top'>
                        <Button type="primary"  onClick={this.handleExportBtnClick} >导出</Button>
                    </Row>
                </div>

                <div className="page-panel">
                    <Table scroll={ {x: true} } onChange={this.handleTableChange} dataSource={this.state.data} loading={this.state.orderListLoading} columns={this.tableColumns} pagination={this.state.pagination}/>
                </div>

            </div>
        )
    }
}
export default OrderList;
